<template>
  <div class="tabbottom" v-show="show">
    <van-tabbar v-model="active" :placeholder="true">
      <van-tabbar-item icon="home-o" :to="'/'">首页</van-tabbar-item>
      <van-tabbar-item icon="chart-trending-o" :to="'/stock'"
        >股票</van-tabbar-item
      >
      <van-tabbar-item icon="medal-o" :to="'/fund'">基金</van-tabbar-item>
      <van-tabbar-item icon="balance-o" :to="'/me'">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";

export default {
  name: "Tabbottom",
  data() {
    return {
      active: 0,
      show: true,
    };
  },
  watch: {
    // $route(newRoute, oldRoute) {
    //   if (["/", "/stock", "/fund", "/me"].indexOf(newRoute.path) !== -1) {
    //     this.show = true;
    //   } else {
    //     this.show = false;
    //   }
    //   console.log(newRoute);
    // },
    // 监听watch函数，第一次初始化也会立即执行
    $route: {
      handler(newRoute) {
        let index = ["/", "/stock", "/fund", "/me"].indexOf(newRoute.path);
        if (index !== -1) {
          this.show = true;
          this.active = index;
        } else {
          this.show = false;
        }
      },
      // 配置立即执行属性
      immediate: true,
    },
  },
  components: {
    "van-tabbar": Tabbar,
    "van-tabbar-item": TabbarItem,
  },
};
</script>

<style lang="scss" scoped></style>
